<template>
  <!-- 货品选择 -->
  <el-dialog
    v-loading="loading"
    append-to-body
    title="货品选择"
    :visible="visible"
    width="800px"
    element-loading-text="玩命加载中"
    element-loading-spinner="el-icon-loading"
    @close="close"
  >
    <div class="filter-container between">
      <div>
        <div class="filter-item">
          <span class="filter-item_span">货品编码/名称：</span>
          <el-input
            v-model="listQuery.name"
            clearable
            style="width: 200px"
            placeholder="请输入货品编码/名称"
          />
        </div>
        <div class="filter-item">
          <el-button type="primary" @click="handleFilter">搜索</el-button>
        </div>
      </div>
      <el-button type="primary" @click="submitAdd">确定</el-button>
    </div>
    <div class="tableBox">
      <el-table
        ref="multipleTable"
        border
        size="small"
        max-height="450"
        :data="list"
        @selection-change="handleSelectionChange"
      >
        <el-table-column
          align="center"
          type="selection"
          label="选择"
          width="60"
          header-align="center"
          :selectable="checkBoxAble"
        />
        <el-table-column
          prop="picUrl"
          header-align="center"
          label="货品图片"
          width="100"
          align="center"
        >
          <template slot-scope="scope">
            <viewer
              :key="$downPath + scope.row.picUrl"
              class="Centered"
              :options="vieweroptions"
            >
              <img
                v-if="scope.row.picUrl"
                :key="$downPath + scope.row.picUrl"
                v-lazy="$downPath + scope.row.picUrl"
                class="avatar"
                :src="$downPath + scope.row.picUrl"
                width="40"
              >
            </viewer>
          </template>
        </el-table-column>
        <el-table-column
          prop="goodsNo"
          align="center"
          width="100"
          show-overflow-tooltip
          label="货品编码"
        />
        <el-table-column
          prop="goodsName"
          header-align="center"
          show-overflow-tooltip
          label="货品名称"
        />
        <el-table-column
          prop="createTime"
          align="center"
          header-align="center"
          label="创建时间"
          width="160"
        />
      </el-table>
    </div>
    <!-- 分页 -->
    <div slot="footer" class="text_left">
      <el-pagination
        :current-page="listQuery.current"
        :page-sizes="[10, 20, 50, 100, 300, 500]"
        :page-size="listQuery.size"
        layout="total, sizes, prev, pager, next, jumper"
        :total="listQuery.total"
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
      />
    </div>
  </el-dialog>
</template>
<script>
import { getGoodsList } from '@/api/product'
export default {
  name: 'GoodsRecommendedEditor',
  props: ['visible', 'value', 'goods'],
  data() {
    return {
      vieweroptions: { zIndex: 5000 },
      loading: false,
      listQuery: {
        page: 1,
        total: 0,
        size: 10,
        current: 1,
        name: undefined,
        excludeGoodsNo: undefined
      },
      selGoodsList: [],
      list: []
    }
  },
  watch: {
    value() {
      this.selGoodsList = Object.assign([], this.value)
    },
    goods() {
      this.search()
    }
  },
  created() {
    this.selGoodsList = Object.assign([], this.value)
    this.search()
  },
  methods: {
    handleSizeChange(val) {
      this.listQuery.size = val
      this.search()
    },
    handleCurrentChange(val) {
      this.listQuery.current = val
      this.search()
    },
    handleSelectionChange(val) {
      val.forEach(item => {
        var goods = this.selGoodsList.filter(x => x.goodsNoRecommended === item.goodsNo)
        if (goods === undefined || goods.length === 0) {
          this.selGoodsList.push({
            goodsNo: this.goods.goodsNo,
            goodsNoRecommended: item.goodsNo,
            goodsName: item.goodsName,
            picUrl: item.picUrl,
            isEnabled: true,
            sortNo: this.selGoodsList.length + 1
          })
        }
      })
    },
    checkBoxAble(row, index) {
      if (this.value === undefined || this.value.length === 0) return true
      var goods = this.value.filter(x => x.goodsNoRecommended === row.goodsNo)
      return goods === undefined || goods.length === 0
    },
    close() {
      this.$emit('update:visible', false)
    },
    handleFilter() {
      this.listQuery.current = 1
      this.search()
    },
    search() {
      this.loading = true
      this.listQuery.excludeGoodsNo = this.goods.goodsNo
      getGoodsList(this.listQuery).then(res => {
        this.list = res.data.records
        this.listQuery.total = res.data.total
      }).finally(res => {
        this.loading = false
      })
    },
    submitAdd() {
      this.$refs.multipleTable.clearSelection()
      this.$emit('input', this.selGoodsList)
      this.close()
    }
  }
}
</script>
